<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>事件处理</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
            <button @click="showInfo2($event,obj)">点我提示信息2(传参)</button>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    name: "尚硅谷",
                    obj: {
                        a: 1,
                        b: 2,
                    },
                },
                methods: {
                    showInfo1(event) {
                        console.log("====================================");
                        console.log(event);
                        console.log("====================================");
                        alert("你好！");
                    },
                    showInfo2(event, info) {
                        console.log("====================================");
                        console.log(event);
                        console.log(info); 
                        console.log("====================================");
                        alert("你好！" + this.name);
                    },
                },
            });
        </script>
    </body>
</html>
